<template>
  <div>
    <div class="d-flex flex-column w-100">
      <div class="border-b font-size-14 font-weight-400 line-height-140 wrap" v-for="item in items" :key="item.id">
        <div class="d-flex justify-center justify-space-between">
          <div class="text-subtitle">{{ $t('info.purchaseItem') }}</div>
          <div>
            {{ payItem(item) }}
          </div>
        </div>
        <div class="d-flex justify-center justify-space-between">
          <div class="text-subtitle">{{ $t('info.orderNumber') }}</div>
          <div>{{ item.order_no }}</div>
        </div>
        <div class="d-flex justify-center justify-space-between">
          <div class="text-subtitle">{{ $t('info.amount') }}</div>
          <div>${{ formatMoney(item.money) }}</div>
        </div>
        <div class="d-flex justify-center justify-space-between">
          <div class="text-subtitle">{{ $t('info.purchaseDate') }}</div>
          <div>{{ item.created_at }}</div>
        </div>
<!--        <div v-if="errorMsg" class="text-start err-msg font-size-14 font-weight-400 line-height-120 text-primary-x">-->
<!--          {{ errorMsg }}-->
<!--        </div>-->
      </div>
    </div>
    <div v-if="!loading && items.length === 0" class="py-12">
      <ErrorNodata></ErrorNodata>
    </div>
    <div v-else>
      <v-container v-intersect="nextPage" class="text-center">
        <div v-if="loading" class="loading font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.loading') }}
        </div>
        <div v-if="noMore" class="no-more font-size-14 font-weight-400 line-height-140 text-center">
          {{ $t('common.noMore') }}
        </div>
      </v-container>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { $t } from '@/i18n'
import ErrorNodata from '@/components/common/ErrorNodata.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { INVOICE_TYPE, PURCHASE_VIP_TYPE } from '@/constant'
import API from '@/http'

const { dataList: items, loading, noMore, errorMsg, init, nextPage } = useInfinite({ request: API.Invoice.list })

init()

const formatMoney = (money) => {
  return money.toLocaleString()
}

const payItem = computed(() => (item) => {
  if (item.type === INVOICE_TYPE.PURCHASE_VIP) {
    return item.note === PURCHASE_VIP_TYPE.SEASON ? $t('info.purchaseSeasonVip') : $t('info.purchaseMonthVip')
  } else {
    if (item.type === INVOICE_TYPE.SUBSCRIBE) {
      return `${item.username}${$t('label.subscribe')}`
    } else if (item.type === INVOICE_TYPE.REWARD) {
      return `${item.username}${$t('info.reward')}`
    } else if (item.type === INVOICE_TYPE.PURCHASE_VIDEO) {
      return `${item.username}${$t('info.purchaseVideo')}`
    } else if (item.type === INVOICE_TYPE.PURCHASE_PIC) {
      return `${item.username}${$t('info.purchasePic')}`
    } else {
      // INVOICE_TYPE.ACTIVITY 活動消費
      return `${item.content}`
    }
  }
})
</script>
<style lang="scss" scoped>
.wrap {
  padding: 1rem 0 0.625rem 0;
}
</style>
